﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div class="card" id="app">
        <div class="card-header">
            日志
        </div>
        <div class="card-body">
            <!--<input type="text" class="form-control" v-model="searchData.RemoteIP" />
            <input type="text" class="form-control" v-model="searchData.BeginDate" />
            <input type="text" class="form-control" v-model="searchData.EndDate" />
            <button class="btn btn-primary" @click="search()">搜索</button>-->
            <ul class="list-group">
                <li class="list-group-item list-group-item-action flex-column align-items-start" v-bind:class="getColor(item)" v-for="item in logs">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">{{item.categoryName}}</h5>
                        <small>{{item.timestamp}}</small>
                    </div>
                    <p class="mb-1">{{item.message}}</p>
                    <small>{{item.appName}}</small>
                </li>
            </ul>
            <button @click="loadMore()">加载更多</button>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                searchData: {
                    PageIndex: 1,
                    PageSize: 10,
                    RemoteIP: "",
                    BeginDate: "",
                    EndDate: ""
                },
                logs: []
            },
            methods: {
                search() {
                    var that = this;
                    $.post("/api/logs/list", this.searchData, r => {
                        that.logs = r.data;
                    });
                },
                loadMore() {
                    var that = this;
                    this.searchData.PageIndex++;
                    $.post("/api/logs/list", this.searchData, r => {
                        r.data.forEach(item => {
                            that.logs.push(item);
                        });
                    });
                },
                getColor(item) {
                    switch (item.logLevel) {
                        case "Error":
                            return "list-group-item-danger";
                        case "Warning":
                            return "list-group-item-warning";
                        case "Critical":
                            return "list-group-item-dark";
                        default:
                            return "";
                    }
                }
            },
            created() {
                this.search();
            }
        });
    </script>
</body>
</html>